<script setup lang="ts">
const displayUtc = defineModel<boolean>('utc', { default: true });
</script>

<template>
  <span
    class="cursor-pointer hover:text-sys-text-head"
    @click="displayUtc = !displayUtc"
  >
    <slot>{{ $t('vSWndcqBgbF9tlnzy6ZR') }}</slot>
    ({{ displayUtc ? 'UTC' : 'Locle' }}) <i class="i-ri:exchange-line scale-120" />
  </span>
</template>
